<template>
    <n-card class="container" size="large">
        <n-tabs animated size="large">
            <n-tab-pane name="the beatles" tab="个人资料">
                <n-form
                    ref="formRef"
                    :model="userForm"
                    :rules="rules"
                    label-placement="left"
                    label-width="auto"
                    require-mark-placement="right-hanging"
                >
                    <n-form-item label="用户名" path="username">
                        <n-input v-model:value="userForm.username"/>
                    </n-form-item>

                    <n-form-item label="邮箱" path="email">
                        <n-input v-model:value="userForm.email"/>
                    </n-form-item>
                    <n-form-item label="简介" path="introduction">
                        <n-input v-model:value="userForm.introduction" :autosize="{minRows: 3,maxRows: 5}"
                                 :show-count="true"
                                 maxlength="255"
                                 placeholder="这个人很神秘，什么都没有写" type="textarea"/>
                    </n-form-item>
                </n-form>
            </n-tab-pane>
            <n-tab-pane name="jay chou" tab="密码重置">
                <n-form ref="passwordFormRef"
                        :model="userForm"
                        :rules="rules"
                        label-placement="left"
                        label-width="auto"
                        require-mark-placement="right-hanging">
                    <n-form-item label="密码" path="password">
                        <n-input
                            v-model:value="userForm.password"
                            size="large"
                            type="password"
                            @input="handlePasswordInput"
                            @keydown.enter.prevent
                        />
                    </n-form-item>
                    <n-form-item ref="rPasswordFormItemRef" :first="true" label="重复密码"
                                 path="reenteredPassword">
                        <n-input v-model:value="userForm.reenteredPassword"
                                 :disabled="!userForm.password" size="large"
                                 type="password"/>
                    </n-form-item>
                </n-form>
            </n-tab-pane>
        </n-tabs>
        <template #action>
            <n-button type="primary" @click="handleUpdateProfile">保存修改</n-button>
        </template>
    </n-card>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getUser, partialUpdateUser } from '../api/user'
import { useMessage } from 'naive-ui'

const userForm = ref({
    id: null,
    username: '',
    password: '',
    email: '',
    introduction: '',
    reenteredPassword: '',
})

const passwordFormRef = ref(null)
const rPasswordFormItemRef = ref(null)
const handlePasswordInput = () => {
    if (userForm.value.reenteredPassword) {
        rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
    }
}
const validatePasswordStartWith = (rule, value) => {
    return !!userForm.value.password && userForm.value.password.startsWith(value) &&
        userForm.value.password.length >= value.length
}
const validatePasswordSame = (rule, value) => {
    return value === userForm.value.password
}
const rules = {
    password: [
        {
            required: true,
            message: '请输入密码',
        },
    ],
    reenteredPassword: [
        {
            required: true,
            message: '请再次输入密码',
            trigger: ['input', 'blur'],
        },
        {
            validator: validatePasswordStartWith,
            message: '两次密码输入不一致',
            trigger: 'input',
        },
        {
            validator: validatePasswordSame,
            message: '两次密码输入不一致',
            trigger: ['blur', 'password-input'],
        },
    ],
}
const route = useRoute()
onMounted(() => {
        getUserInfo()
    },
)

const message = useMessage()
const handleUpdateProfile = () => {
    passwordFormRef.value.validate(errors => {
        if (!errors) {
            partialUpdateUser(userForm.value.id, userForm.value).then(res => {
                if (res.code === '200') {
                    userForm.value.username = res.data.username
                    userForm.value.email = res.data.email
                    userForm.value.introduction = res.data.introduction
                    userForm.value.password = ''
                    userForm.value.reenteredPassword = ''
                    message.success('修改成功')
                }
            })
        } else {
            message.error('密码校验失败！')
        }
    })

}

const getUserInfo = () => {
    getUser(route.params.id).then(res => {
        if (res.code === '200') {
            userForm.value.username = res.data.user.username
            userForm.value.email = res.data.user.email
            userForm.value.introduction = res.data.user.introduction
            userForm.value.id = res.data.user.id
        }
    })
}


</script>

<style scoped>

</style>
